<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.min.css">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	</head>
	<body>
		<div class="container">
			<h4>使用flex-fill</h4>
			<div class="bg-secondary p-2 d-flex">
				<div class="p-2 bg-info flex-fill">flex item-1</div>
				<div class="p-2 bg-warning flex-fill">flex item-2</div>
				<div class="p-2 bg-success flex-fill">flex item-3</div>
			</div>
			<div class="bg-secondary p-2 d-flex">
				<div class="p-2 bg-info flex-grow-1">flex item-1</div>
				<div class="p-2 bg-warning">flex item-2</div>
				<div class="p-2 bg-success">flex item-3</div>
			</div>
			<div class="bg-secondary p-2 d-flex">
				<div class="p-2 bg-info w-100">flex item-1</div>
				<div class="p-2 bg-warning flex-shrink-1">flex item-2</div>
				<div class="p-2 bg-success flex-shrink-1">flex item-3</div>
			</div>
		</div>
		<div class="container">
			<h4>使用mr-auto自动边距</h4>
			<div class="d-flex bg-secondary">
				<div class="p-2 bg-danger mr-auto">flex item-1</div>
				<div class="p-2 bg-info ">flex item-2</div>
				<div class="p-2 bg-warning mr-auto">flex item-3</div>
			</div>
			<h4>使用order-实现排序</h4>
			<div class="d-flex bg-secondary justify-content-around">
				<div class="p-2 bg-danger mr-auto order-3">flex item-1</div>
				<div class="p-2 bg-info order-2">flex item-2</div>
				<div class="p-2 bg-warning mr-auto order-1">flex item-3</div>
			</div>
		</div>
	</body>
</html>
